import React, { useState, useEffect } from 'react';
import shoppingCss from './shoppingcss.module.css';
import { BrowserRouter as Router, useNavigate } from 'react-router-dom';
import http from '../../utils/request';
import axios from 'axios';
// 定义页面数据类型
interface ShoppingProps {
    // 这里可以定义组件可能接收的props，目前没有，后续有需求可添加
}

// 定义页面状态类型
interface ShoppingState {
    pet: string;
    address: string;
}

const Shopping: React.FC<ShoppingProps> = () => {
    const navigate = useNavigate();
    // 初始化状态
    const [state, setState] = useState<ShoppingState>({
        pet: '',
        address: ''
    });

    const handlePetChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setState(prevState => ({
            ...prevState,
            pet: e.target.value
        }));
    };

    const handleAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setState(prevState => ({
            ...prevState,
            address: e.target.value
        }));
    };

    const handlePurchase = () => {
        // 这里可以添加购买逻辑，比如调用API提交订单等
        console.log('购买操作，宠物:', state.pet, '地址:', state.address);
        let from = { price: 180 }
        axios.post('http://localhost:3000/pcpay', from).then(res => {
            const paymentUrl = res.data.result;
            console.log(paymentUrl);
            window.location.href = paymentUrl;
        })
    };
    useEffect(() => {
        axios.get('http://localhost:3000/index').then(res => {
            console.log(res);
        })
    }, [])
    return (
        <div className={shoppingCss.container}>
            {/* 头部信息 */}
            <div className={shoppingCss.header}>
                <img src="https://www.2008php.com/2011_Website_appreciate/11-03-06/20110306202206.jpg" alt="小型犬" className={shoppingCss.headerImg} />
                <div className={shoppingCss.headerInfo}>
                    <h2>小型犬洗澡美容套餐</h2>
                    <p>金金萌宠店</p>
                    <p>包含小型犬洗澡、美容服务、洁白洁牙</p>
                    <p>半年消费 37</p>
                </div>
            </div>
            {/* 表单部分 */}
            <div className={shoppingCss.formSection}>
                <div className={shoppingCss.formItem}>
                    <label>宠物</label>
                    <input
                        type="text"
                        placeholder="请添加宠物"
                        value={state.pet}
                        onChange={handlePetChange}
                    />
                </div>
                <div className={shoppingCss.formItem}>
                    <label>地址</label>
                    <input
                        type="text"
                        placeholder="请添加地址"
                        value={state.address}
                        onChange={handleAddressChange}
                    />
                </div>
                <div className={shoppingCss.formItem}>
                    <label>门店</label>
                    <span>中关村理想城店</span>
                </div>
            </div>
            {/* 服务介绍部分 */}
            <div className={shoppingCss.serviceIntro}>
                <h3>服务介绍</h3>
                <img src="https://www.2008php.com/2011_Website_appreciate/11-03-06/20110306202206.jpg" alt="服务示例犬" className={shoppingCss.serviceImg} />
            </div>
            {/* 底部价格和购买按钮 */}
            <div className={shoppingCss.footer}>
                <span>共计 ¥188</span>
                <button className={shoppingCss.purchaseBtn} onClick={handlePurchase}>
                    立即抢购
        </button>
            </div>
        </div>
    );
};

export default Shopping;